<template>
	<view class="order-detail">
		<!-- 倒计时模块 -->
		<view class="countdown-section">
			<text class="countdown-tip">请在</text>
			<text class="countdown-time">{{hours}}: {{minutes}}: {{seconds}}</text>
			<text class="countdown-tip">内完成付款</text>
		</view>
		
		<!-- 收货地址信息 -->
		<view class="address-section">
			<view class="address-content">
				<view class="address-left">
					<image class="location-icon" src="/static/svg/location-icon.svg"></image>
				</view>
				<view class="address-right">
					<view class="address-user">
						<text class="address-name">李小花</text>
						<text class="address-phone">18851387766</text>
					</view>
					<view class="address-detail">
						广东省广州市大华区明离路科技园880号
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="goods-item">
				<image class="goods-img" src="/static/default-recommend.png" mode="aspectFill"></image>
				<view class="goods-content">
					<view class="goods-title">艾丽苏抹茶蛋糕早点低糖健康</view>
					<view class="goods-subtitle">实惠装</view>
					<view class="goods-info">
						<text class="goods-price">¥136</text>
						<text class="goods-count">×1</text>
					</view>
					<view class="goods-tag">3人团</view>
				</view>
			</view>
			
			<!-- 价格明细 -->
			<view class="price-section">
				<view class="price-item">
					<text class="price-label">商品总额：</text>
					<text class="price-value">¥136.00</text>
				</view>
				<view class="price-item">
					<text class="price-label">运费：</text>
					<text class="price-value">¥0.00</text>
				</view>
				<view class="price-item">
					<text class="price-label">商品优惠：</text>
					<text class="price-value">-¥10.00</text>
				</view>
				<view class="price-item actual-price">
					<text class="price-label">实付款：</text>
					<text class="price-value highlight">¥126.00</text>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info-section">
			<view class="order-info-item">
				<text class="order-info-label">订单号</text>
				<text class="order-info-value">418628327723666</text>
			</view>
			<view class="order-info-item">
				<text class="order-info-label">下单时间</text>
				<text class="order-info-value">2019-02-36 15:36:25</text>
			</view>
		</view>
		
		<!-- 客服按钮 -->
		<view class="customer-service">
			<image class="service-icon" src="/static/svg/customer-service.svg"></image>
			<text class="service-text">联系客服</text>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-action">
			<button class="btn cancel-btn" @click="cancelOrder">取消订单</button>
			<button class="btn pay-btn" @click="goPay">去支付</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	
	// 倒计时功能
	const hours = ref('00');
	const minutes = ref('59');
	const seconds = ref('57');
	let timer = null;
	
	// 开始倒计时
	const startCountdown = () => {
		let totalSeconds = parseInt(hours.value) * 3600 + parseInt(minutes.value) * 60 + parseInt(seconds.value);
		
		timer = setInterval(() => {
			if (totalSeconds <= 0) {
				clearInterval(timer);
				return;
			}
			
			totalSeconds--;
			const h = Math.floor(totalSeconds / 3600);
			const m = Math.floor((totalSeconds % 3600) / 60);
			const s = totalSeconds % 60;
			
			hours.value = h < 10 ? '0' + h : h;
			minutes.value = m < 10 ? '0' + m : m;
			seconds.value = s < 10 ? '0' + s : s;
		}, 1000);
	};
	
	// 获取订单详情
	const getOrderDetail = () => {
		// 模拟请求订单数据
		// 实际项目中应该从后端获取订单数据
	};
	
	// 取消订单
	const cancelOrder = () => {
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: (res) => {
				if (res.confirm) {
					// 调用取消订单接口
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
					// 跳转到订单列表页
					uni.navigateBack();
				}
			}
		});
	};
	
	// 去支付
	const goPay = () => {
		// 调用支付接口
		uni.showLoading({
			title: '正在跳转支付...'
		});
		
		// 模拟支付调用
		setTimeout(() => {
			uni.hideLoading();
			// 跳转到支付页面或调用支付API
		}, 1000);
	};
	
	onMounted(() => {
		getOrderDetail();
		startCountdown();
	});
</script>

<style>
	/* 公共样式 */
	.order-detail {
		font-size: 28rpx;
		color: #333;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 倒计时区域 */
	.countdown-section {
		background-color: #fff;
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666;
		border-bottom: 1rpx solid #eee;
	}
	
	.countdown-time {
		color: #FF5722;
		font-weight: bold;
		font-size: 36rpx;
		margin: 0 10rpx;
	}
	
	/* 地址信息区域 */
	.address-section {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}
	
	.address-content {
		display: flex;
		align-items: flex-start;
	}
	
	.location-icon {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}
	
	.address-right {
		flex: 1;
	}
	
	.address-user {
		display: flex;
		margin-bottom: 15rpx;
	}
	
	.address-name {
		margin-right: 30rpx;
		font-weight: bold;
	}
	
	.address-phone {
		color: #666;
	}
	
	.address-detail {
		color: #333;
		line-height: 1.4;
	}
	
	/* 商品信息区域 */
	.goods-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.goods-item {
		display: flex;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.goods-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}
	
	.goods-content {
		flex: 1;
		position: relative;
	}
	
	.goods-title {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.goods-subtitle {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 15rpx;
	}
	
	.goods-info {
		display: flex;
		justify-content: space-between;
	}
	
	.goods-price {
		color: #333;
		font-weight: bold;
	}
	
	.goods-count {
		color: #999;
	}
	
	.goods-tag {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #FF5722;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
	}
	
	/* 价格明细区域 */
	.price-section {
		padding-top: 30rpx;
	}
	
	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.price-label {
		color: #666;
	}
	
	.price-value {
		color: #333;
	}
	
	.actual-price {
		margin-top: 20rpx;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
	}
	
	.highlight {
		color: #FF5722;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	/* 订单信息区域 */
	.order-info-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.order-info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.order-info-label {
		color: #666;
	}
	
	.order-info-value {
		color: #333;
		max-width: 70%;
		text-align: right;
	}
	
	/* 客服按钮 */
	.customer-service {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		padding: 20rpx 0;
		background-color: #fff;
	}
	
	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.service-text {
		color: #666;
	}
	
	/* 底部操作按钮 */
	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
	
	.cancel-btn {
		margin-right: 20rpx;
		background-color: #f5f5f5;
		color: #666;
	}
	
	.pay-btn {
		background-color: #FF5722;
		color: #fff;
	}
</style>
